<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>数据采集</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="/themes/admin_simpleboot3/public/assets/themes/flatadmin/bootstrap.min.css">
<style type="text/css">
html,body{
    width:100%;
    height:100%;
}
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
    width:603px;
    padding-top:3px;
    overflow:hidden;
}
.input-data{
    width: 150px;
}
#container{
    min-width:375px;
    min-height:667px;
    height: 100%;
}

#centerDiv{
    display: none;
}

.category-list{
    padding: 10px;
}

.category-item{
    padding: 20px;
}

.json{
    width: 100%;
    height: 100%;
}
.item_checkbox{
    padding-right: 10px;
    font-size: 14px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<script src="/themes/admin_simpleboot3/public/assets/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>

$(function(){
    //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
    var map = new qq.maps.Map(document.getElementById("container"), {
        center: new qq.maps.LatLng(39.916527,116.397128),      // 地图的中心地理坐标。
        zoom:13                                                 // 地图的中心地理坐标。
    });
    

    var centerDiv = document.getElementById("centerDiv");

    //获取城市列表接口设置中心点
    citylocation = new qq.maps.CityService({
        complete : function(result){
            map.setCenter(result.detail.latLng);
        }
    });

    var middleControl = document.createElement("div");
    middleControl.style.left="45%";
    middleControl.style.top="45%";
    middleControl.style.position="relative";
    middleControl.style.width="36px";
    middleControl.style.height="36px";
    middleControl.style.zIndex="100000";
    middleControl.innerHTML ='<img src="https://www.cdlhome.com.sg/mobile_assets/images/icon-location.png" />';
    document.getElementById("container").appendChild(middleControl);
    //返回地图当前中心点地理坐标
    centerDiv.innerHTML = "latlng:" + map.getCenter();
    //当地图中心属性更改时触发事件
    qq.maps.event.addListener(map, 'center_changed', function() {
        centerDiv.innerHTML = "latlng:" + map.getCenter();
        point = map.getCenter();
        $("input[name='data_lng']").val(point.lng);
        $("input[name='data_lat']").val(point.lat);
    });


    function CustomZoomControl(controlDiv, map) {
        controlDiv.style.padding = "5px";
        controlDiv.style.marginBottom = "20px";
        controlDiv.style.backgroundColor = "#FFFFFF";
        controlDiv.style.border = "2px solid #86ACF2";
        controlDiv.innerHTML = "<a class='btn btn-success input-data'>录入信息</a>";

        controlDiv.index = 1;//设置在当前布局中的位置
    }

    var customZoomDiv = document.createElement("div");
    var customZoomControl = new CustomZoomControl(customZoomDiv, map);
    //将控件添加到controls栈变量并将其设置在顶部位置
    map.controls[qq.maps.ControlPosition.BOTTOM_CENTER].push(customZoomDiv);


    //调用searchLocalCity();方法    根据用户IP查询城市信息。
    citylocation.searchLocalCity();

    function createCategoryHtml(data){
        var html = '<div class="category-list">';

        for(k in data){
            var tmp = data[k];

            html += "<a class='btn btn-lg btn-info btn-block check-category' data-category_id='" + tmp.id + "'>" + tmp.category_name + "</a>"
        }

        html += '</div>';

        return html;

    }

    function createItemHtml(category_id, data){
        var html = '<div class="category-item"><form id="form1">';

        for(k in data){
            var tmp = data[k];

            var value = tmp.item_value.split("|");

            html += '<div class="form-group">\
                <label for="' + tmp.item_hex + '">' + tmp.item_name + '</label>';

            if(tmp.item_type == 1){
                html += '<input type="text" class="form-control" id="item_' + tmp.item_hex + '" name="item_' + tmp.item_hex + '">';
            }else if(tmp.item_type == 2){
                html += '<select name="item_' + tmp.item_hex + '" class="form-control">';
                for(vk in value){
                    html += '<option>' + value[vk] + '</option>';
                }
                html += "</select>";
            }else if(tmp.item_type == 3){
                html += '<br>';
                for(vk in value){
                    html += '<label class="item_checkbox"><input type="checkbox" id="item_' + tmp.item_hex + '" value="' + value[vk] + '" name="item_' + tmp.item_hex + '[]">&nbsp;' + value[vk] + "</label>";
                }
            }

            html += '</div>';
        }

        html += '<input type="hidden" class="category_id" name="category_id" value="' + category_id + '"/>';
        html += $("#point").html();
        html += '<input type="button" class="btn btn-block btn-info" name="submit-item" value="提&emsp;交"/>';
        html += '<input type="button" class="btn btn-block btn-danger" name="close-item" value="关&emsp;闭"/>';
        html += '</form></div>';

        return html;

    }

    $(document).on("click", ".input-data", function(){
        $.ajax({
            url:'{:url('Index/getCategoryList')}',
            type: 'GET',
            dataType: 'json',
            success: function(res){
                if(res.code > 0){
                    layer.open({
                      type: 1,
                      title: '采集分类',
                      skin: 'layui-layer-demo', //样式类名
                      closeBtn: 1, //不显示关闭按钮
                      area: ['100%', '100%'],
                      shadeClose: true, //开启遮罩关闭
                      content: createCategoryHtml(res.data)
                    });
                }else{
                    layer.alert(res.msg, {
                      icon: 2,
                    });
                }
            }

        })
    })

    $(document).on("click", ".check-category", function(){
        var category_id = $(this).data('category_id');

        $.ajax({
            url:'{:url('Index/getItemList')}',
            type: 'GET',
            dataType: 'json',
            data: {'category_id': category_id},
            success: function(res){
                if(res.code > 0){
                    layer.closeAll();
                    layer.open({
                      type: 1,
                      title: '录入数据',
                      skin: 'layui-layer-demo', //样式类名
                      closeBtn: 1, //不显示关闭按钮
                      area: ['100%', '100%'],
                      shadeClose: true, //开启遮罩关闭
                      content: createItemHtml(category_id, res.data)
                    });
                }else{
                    layer.alert(res.msg, {
                      icon: 2,
                    });
                }
            }

        })
    })

    $(document).on('click', "input[name='submit-item']", function(){
        var data = $("#form1").serialize();
        
        $.ajax({
            url:'{:url('Index/addItemInfo')}',
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function(res){
                if(res.code > 0){
                    layer.alert('数据添加成功', function(){
                        layer.closeAll();
                        /*var category_id = $('.category_id').val();
                        $.ajax({
                            url:'{:url('Index/getItemList')}',
                            type: 'GET',
                            dataType: 'json',
                            data: {'category_id': category_id},
                            success: function(res){
                                if(res.code > 0){
                                    layer.closeAll();
                                    layer.open({
                                      type: 1,
                                      title: '录入数据',
                                      skin: 'layui-layer-demo', //样式类名
                                      closeBtn: 1, //不显示关闭按钮
                                      area: ['100%', '100%'],
                                      shadeClose: true, //开启遮罩关闭
                                      content: createItemHtml(category_id, res.data)
                                    });
                                }else{
                                    layer.alert(res.msg, {
                                      icon: 2,
                                    });
                                }
                            }

                        })*/
                    })
                }else{
                    layer.alert(res.msg, {
                      icon: 2,
                    });
                }
            }

        })
    })

    $(document).on('click', "input[name='close-item']", function(){
        layer.closeAll();
    })
})
</script>
</head>
<body>
    <div id="centerDiv"></div>
    <div id="container"></div>
    <div id="point">
        <input type="hidden" name="data_lng">
        <input type="hidden" name="data_lat">
    </div>
</body>
</html>
